<template>
  <div class="legend" :style="{ left, bottom }">
    <img class="legendIcon" @click.stop="handleClickShowLegend" :class="{ greyIcon: !state.isShowLegendList }" src="./icon.png" />
    <div class="legendListBox" v-show="state.isShowLegendList">
      <a-collapse v-model:activeKey="state.activeKey" ghost expand-icon-position="right" size="small">
        <a-collapse-panel v-for="children in state.legendData" :key="children.type">
          <template #header>
            <h3 class="title"><span>{{children.name}}</span></h3>
          </template>
          <ul class="legendList">
            <li
              class="legendListItem"
              v-for="(item, index) in children.data"
              :class="{ isShow: !item.status }"
              :key="index"
              @click.stop="handleClickLegendItem(item)"
            >
              <a-checkbox v-if="item.isChecked" v-model:checked="item.status" @change="handleChangeChecked(item)">
                <section>
                  <img v-if="item.icon" :src="item.icon" alt="图标" />
                  <span>{{ item.name }}</span>
                </section>
              </a-checkbox>
              <section v-else>
                <img v-if="item.icon" :src="item.icon" alt="图标" />
                <span>{{ item.name }}</span>
              </section>
            </li>
          </ul>
        </a-collapse-panel>

      </a-collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch } from 'vue';
  import { setLayerVisible } from 'gmap-ol';

  defineOptions({ name: 'Legend' });
  const emit = defineEmits(['change-legend-data']);

  const props = defineProps({
    name: { type: String },
    left: {
      type: String,
      default: '-50px',
    },
    bottom: {
      type: String,
      default: '0',
    },
    data: {
      type: [Number, Array, String] as PropType<string | string[]>,
      default: '',
    },
    globalMap: {
      type: Object,
      default: null,
    },
  });

  const state = reactive({
    isShowLegendList: false,
    legendData: [...props.data],
    activeKey: [props.data[0].type],
  });

  const handleClickShowLegend = () => {
    state.isShowLegendList = !state.isShowLegendList
  }

  const handleChangeChecked = (item) => {
    console.log(item, 'ssssssssss');
  }

  // 点击图例icon
  const handleClickLegendItem = (item) => {
    let legendData = state.legendData;
    for (let i = 0; i < legendData.length; i++) {
      if (legendData[i].name === item.name) {
        const status = !legendData[i].status;
        legendData[i].status = status;
        state.legendData = legendData;
      }
    }
    emit('change-legend-data', legendData);
    changeLegendStatus(state.legendData);
  };

  const changeLegendStatus = (legendData) => {
    for (let i = 0; i < legendData.length; i++) {
      const type = legendData[i].type;
      const status = legendData[i].status;
      if (props.globalMap) {
        setLayerVisible(props.globalMap, type, status);
      }
    }
  };

  watch(
    () => props.globalMap,
    () => {
      changeLegendStatus(state.legendData);
    }
  );
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .legend {
    position: absolute;
    z-index: 200;
    bottom: 0px;
    width: 40px;
    height: 40px;
    background: rgba(251, 252, 255, 1);
    box-shadow: 0px 4px 6px 0px #03225917;
    border-radius: 6px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    &:hover, &:active {
      // background: #e8fff4;
      border: 1px solid #b9e9d3;
    }
    img.legendIcon {
      width: 24px;
      height: 25px;
      cursor: pointer;
    }
    .greyIcon {
      filter: grayscale(100%);
    }
    .legendListBox {
      position: absolute;
      right: 50px;
      bottom: 0;
      min-width: 210px;
      background: rgba(251, 252, 255, 1);
      box-shadow: 0px 4px 6px 0px #03225917;
      border-radius: 6px;
      border: 1px solid #fff;
      padding: 2px 0 4px 0;
      ::v-deep(.ant-collapse-arrow) {
        font-size: 16px;
        color: #81d9b2;
      };
      ::v-deep(.ant-collapse-content-box ) {
        padding-top: 4px;
        padding-bottom: 6px;
      };
      h3.title {
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        position: relative;
        span {
          display: inline-block;
          padding-right: 10px;
          background: #fbfcff;
          color: #1b9b68;
          position: relative;
          z-index: 100;
        }
        &:before {
          content: '';
          position: absolute;
          right: 0px;
          top: 50%;
          z-index: 1;
          width: 100%;
          height: 1px;
          border-top: 1px dashed #bef3ce;
        }
      }
      ul.legendList {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row-gap: 10px;
        grid-column-gap: 6px;
        li.legendListItem {
          display: flex;
          align-items: center;
          section {
            display: flex;
            align-items: center;
          }
          label.ant-checkbox-wrapper {
            display: flex;
            align-items: center;
            ::v-deep(.ant-checkbox) {
              top: 0px;
            }
          }
          img {
            margin-right: 6px;
          }
          span {
              white-space: nowrap;
              display: flex;
              align-items: center;
            }
        }
        .isShow {
          filter: grayscale(100%) !important;
          opacity: 0.7 !important;
        }
      }
    }
  }
</style>
